<template>
	<view class="content">
		<!-- F0: 状态栏，调用自定义组件 -->
		<myStatusbar />
		<!-- 导航栏 -->
		<!-- 
			rightText 右侧显示文本 
			leftIcon="back"  左侧图标
			leftText="返回"   左侧显示文本
		-->
		<uni-nav-bar
			title="智慧社区"
			backgroundColor="#090"
			color="#FFF"
			rightIcon="search"
			@clickRight="jump('/pages/login/login')"
		/>
		<!-- F1: 轮播图 -->
		<!-- 
		 indicator-dots  是否显示指示点
		 indicator-color  指示点颜色
		 indicator-active-color  当前选中的颜色
		 autoplay  是否自动切换
		 interval  间隔的时长
		 duration  动画播放时长
		 -->
		<swiper 
			:indicator-dots="true"
			indicator-color="rgba(255,255,255,0.5)"
			indicator-active-color="#FFF"
			:autoplay="true"
			interval="3000"
			duration="200"
		>
			<swiper-item v-for="item in carouselList" :key="item.cid">
				<view class="carousel-container">
					<image 
						:src='baseURL + item.pic' 
						class="carousel"
						@click="jump(item.href)"
					></image>
				</view>
			</swiper-item>
			
		</swiper>
		<!-- F2: 八宫格 -->
		<!-- column 每行显示的列数 -->
		<uni-grid class="func-menu" :column="4">
			<uni-grid-item>
				<view class="menu-item" @click="jump('/pages/propertyFee/propertyFee')">
					<image src="/static/img/rmb.png" mode="widthFix" />
					<text>物业缴费</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item" @click="jump('/pages/parking/parking')">
					<image src="/static/img/parking.png" mode="widthFix" />
					<text>智慧停车</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item" @click="jump('/pages/medical/medical')">
					<image src="/static/img/plus.png" mode="widthFix" />
					<text>社区医疗</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item" @click="jump('/pages/chatroom/chatroom')">
					<image src="/static/img/chat.png" mode="widthFix" />
					<text>邻里互动</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item">
					<image src="/static/img/door.png" mode="widthFix" />
					<text>开门</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item">
					<image src="/static/img/tools.png" mode="widthFix" />
					<text>保修</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item">
					<image src="/static/img/sound.png" mode="widthFix" />
					<text>公告</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item">
					<image src="/static/img/more.png" mode="widthFix" />
					<text>更多</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- F3: 商业服务 -->
		<uni-card title="| 商业服务" :isFull="true" class="card">
			<view class="service">
				<view class="service-item">
					<view class="txt">
						<text>房屋租售</text>
						<view>
							<navigator>租房</navigator>
							<navigator>短租</navigator>
						</view>
					</view>
					<image src="/static/img/chuzu.png" />
				</view>
				<view class="service-item">
					<view class="txt">
						<text>便民服务</text>
						<view>
							<navigator>便利店</navigator>
							<navigator>超市</navigator>
						</view>
					</view>
					<image src="/static/img/bianmin.png" />
				</view>
			</view>
		</uni-card>
		<!-- F4: 社区活动 -->
		<uni-card title="| 社区活动" :isFull="true" class="card">
			<uni-list>
				<uni-list-item 
					class="activity-item"
					v-for="item in activityList"
					link="navigateTo"
					:to="'/pages/activityDetail/activityDetail?aid='+item.aid"
				>
					<!-- 头部插槽 -->
					<template v-slot:header>
						<view class="activity-header">
							<text class="title">{{item.title}}</text>
							<text class="content">{{item.content}}</text>
							<text class="time">{{item.pubTime | formatDate}}</text>
						</view>
					</template>
					<!-- 主体插槽 -->
					<template v-slot:body>
						<image 
							class="pic" 
							:src="baseURL+item.pic" 
						/>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>
<script>
	import { indexCarousel, baseURL, indexActivity } from '../../service'
	export default {
		data() {
			return {
				carouselList: [],  // 保存轮播图数据
				baseURL, // 把基础服务器地址存到变量
				activityList: [],  //保存社区活动
				pno: 1,   // 保存当前页码
			}
		},
		// 用于设置过滤器，
		filters: {
			formatDate(date) {
				// date接收到的日期
				// 将日期时间存储到Date对象
				var d = new Date(date)
				// 获取年月日 时分
				var year = d.getFullYear()
				var month = d.getMonth()+1
				var date = d.getDate()
				var hour = d.getHours()
				var minute = d.getMinutes()
				var second = d.getSeconds()
				// 返回结果就是过滤后的
				return `${year}年${month<10 ? '0'+month : month}月${date<10 ? '0'+date : date}日 ${hour<10 ? '0'+hour : hour}:${minute<10 ? '0'+minute : minute}`
			}
		},
		async onLoad() {
			// 页面组件挂载后执行
			uni.showToast({
				title: '登录成功',
				icon: 'none',
				duration: 3000
			})
			// 请求服务器
			const data = await indexCarousel()
			console.log(data)
			// 把结果中轮播图图数据保存
			this.carouselList = data.rows
			
			// 请求社区活动接口
			const list = await indexActivity()
			console.log(list)
			this.activityList = list
		},
		// 滚动到底部会触发
		async onReachBottom() {
			// 页码加1
			this.pno++
			console.log(this.pno)
			// 请求数据,传递页码
			const data = await indexActivity(this.pno)
			console.log(data)
			// 将这一页数据追加到数据列表
			this.activityList = this.activityList.concat(data)
		},
		methods: {
			// 接收到要跳转的地址
			jump(url) {
				// 跳转
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.carousel-container {
		
		.carousel {
			width: 750rpx;
			height: 300rpx;
		}
	}
	// F2:功能菜单
	.func-menu {
		background-color: $uni-bg-color;
		margin-top: $uni-spacing-col-base;
		.menu-item {
			height: 100%;
			// 将弹性布局的主轴方向为纵向
			flex-direction: column;
			// 主轴方向居中对齐
			justify-content: center;
			// 交叉轴方向居中对齐
			align-items: center;
			image {
				width: 35%;
			}
			text {
				font-size: $uni-font-size-base;
				margin-top: $uni-spacing-col-sm;
			}
		}
	}
	// F3: 商业服务
	.card {
		flex-direction: column;
		margin-top: $uni-spacing-col-base !important;
		padding: 0 !important;
	}
	.service {
		width: 100%;
		.service-item {
			flex: 1;
			// 交叉轴垂直对齐
			align-items: center;
			&:first-child {padding-right: $uni-spacing-row-base;}
			&:last-child {padding-left: $uni-spacing-row-base;}
			.txt {
				flex-direction: column;
				flex: 1;
				text {
					font-weight: bold;
				}
				navigator {
					margin-right: $uni-spacing-row-sm;
				}
			}
			image {
				width: 150rpx;
				height: 100rpx;
			}
		}
	}
	// 替换导航栏自带的样式
	// 去除弹性布局
	.uni-navbar {
		display: block;
		// ::v-deep 样式穿透
		::v-deep .uni-navbar__content {
			display: block;
			// 去除自带的下边框
			border-bottom: 0 none;
		}
	}
	// 去除卡片中自带的内边距
	.card {
		flex-direction: column;
		::v-deep .uni-list-item__container {
			padding: 0 !important;
		}
	}
	
	// 社区活动
	.activity-item {
		// 交叉轴垂直居中
		align-items: center;
		.activity-header {
			// 弹性布局的主轴方向为纵向
			flex-direction: column;
			width: 440rpx;
			.title {
				font-size: $uni-font-size-base;
				font-weight: bold;
			}
			.content {
				font-size: $uni-font-size-base;
				// 一旦内容查出一行自动添加 ...
				white-space: nowrap; // 在空白处不换行
				overflow: hidden;  // 内容溢出隐藏
				text-overflow: ellipsis; // 文本溢出用省略号代替
			}
			.time {
				font-size: $uni-font-size-sm;
				color: $zh-theme-grey-light;
				margin-top: $uni-spacing-col-base;
			}
		}
		.pic {
			width: 260rpx;
			height: 140rpx;
		}
	}
</style>
